<template>
    <div style="padding:30px;">
      <el-alert
        title="余票查询"
        type="info"
        :closable="false"
        show-icon
        description="输入出发地及目的地即可查询"
        effect="dark"/>
      <div class="app-container">
        <!-- 构造一下输入框 -->
        <el-popover  trigger="click" placement="bottom" width="340" v-model="popoverVisible">
        <el-autocomplete
        slot="reference"
        class="inline-input"
        v-model="listQuery.start_station"
        :fetch-suggestions="querySearch"
        placeholder="起始站"
        @select="handleSelect"
        :trigger-on-focus="false"
        v-loading="autoLoading"
        > <i slot="suffix" class="el-icon-map-location" style="padding: 8px;font-size: 20px;" @click="getLocation"></i></el-autocomplete>
        <template>
          <el-tabs v-model="activeName">
            <el-tab-pane label="热门" name="tab1">
              <el-row>
                <el-col v-for="(item) in hotCity" :span="4" style="padding: 10px" :key="item">
                 <span class="city_class" @click="selectStartCity(item)">{{ item }}</span> 
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="ABCDE" name="tab2">
              <el-row v-for="(cities, letter) in ABCDE" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectStartCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="FGHJ" name="tab3">
              <el-row v-for="(cities, letter) in FGHJ" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectStartCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="KLMN" name="tab4">
              <el-row v-for="(cities, letter) in KLMN" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectStartCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="PQRST" name="tab5">
              <el-row v-for="(cities, letter) in PQRST" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectStartCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="WXYZ" name="tab6">
              <el-row v-for="(cities, letter) in WXYZ" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0&&city!='梧州'&&city!='乌兰察布'&&city!='潍坊'&&city!='威海'" style="font-size: small;margin-left: -9px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="city==='梧州'||city==='乌兰察布'||city==='潍坊'||city==='威海'" style="font-size: small;margin-left: -12px;" @click="selectStartCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectStartCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-popover>
      <el-popover  trigger="click" placement="bottom" width="340" v-model="popoverVisible2">
        <el-autocomplete
        slot="reference"
        class="inline-input"
        v-model="listQuery.end_station"
        :fetch-suggestions="querySearch"
        placeholder="终点站"
        @select="handleSelect"
        :trigger-on-focus="false"
        v-loading="autoLoading2"
        > <i slot="suffix" class="el-icon-map-location" style="padding: 8px;font-size: 20px;" @click="getLocation2"></i></el-autocomplete>
        <template>
          <el-tabs v-model="activeName">
            <el-tab-pane label="热门" name="tab1">
              <el-row>
                <el-col v-for="(item) in hotCity" :span="4" style="padding: 10px" :key="item">
                 <span class="city_class" @click="selectEndCity(item)">{{ item }}</span> 
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="ABCDE" name="tab2">
              <el-row v-for="(cities, letter) in ABCDE" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectEndCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="FGHJ" name="tab3">
              <el-row v-for="(cities, letter) in FGHJ" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectEndCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="KLMN" name="tab4">
              <el-row v-for="(cities, letter) in KLMN" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectEndCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="PQRST" name="tab5">
              <el-row v-for="(cities, letter) in PQRST" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0" style="font-size: small;margin-left: -9px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectEndCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="WXYZ" name="tab6">
              <el-row v-for="(cities, letter) in WXYZ" :key="letter">
                <span style="float: left;font-size: small; color: #409eff;margin-top: 6px;">{{ letter }}</span>
                <el-col v-for="(city,index) in cities" :key="index" :span="5" style="padding-left: 12px;margin-top: 5px;">
                  <span class="city_class" v-if="index-3<=0&&city!='梧州'&&city!='乌兰察布'&&city!='潍坊'&&city!='威海'" style="font-size: small;margin-left: -9px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="city==='梧州'||city==='乌兰察布'||city==='潍坊'||city==='威海'" style="font-size: small;margin-left: -12px;" @click="selectEndCity(city)">{{ city }}</span>
                  <span class="city_class" v-if="index-3>0" style="font-size: small;" @click="selectEndCity(city)">{{ city }}</span>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-popover>
      <el-date-picker
      v-model="listQuery.arrive_day"
      value-format="yyyy-MM-dd"
      align="right"
      type="date"
      placeholder="选择日期"
      >
      <!-- :picker-options="pickerOptions" -->
    </el-date-picker>

      <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="handleQueryTrain">
          搜索
      </el-button>
      <el-table
        v-loading="listLoading"
        :data="list2"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="编号" >
          <template slot-scope="scope">
            {{ scope.row.train_no}}
          </template>
        </el-table-column>

        <el-table-column label="车次"  align="center">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="450"
              trigger="click"
              >
              <el-table :data="gridData" v-loading="gridLoading" 
              :header-cell-style="{background:'#409eff',color:'#FFFFFF'}"
              fixed="right"
              height="250"
              :row-class-name="gridDataClassName">
                <el-table-column width="50" property="station_no" label="站序"></el-table-column>
                <el-table-column width="80" property="station_name" label="站名"></el-table-column>
                <el-table-column width="100" property="arrive_time" label="到站时间"></el-table-column>
                <el-table-column width="100" property="start_time" label="出发时间"></el-table-column>
                <el-table-column width="80"  label="停留时间">
                  <template slot-scope="{row,$index}">
                    {{ handleResidence(row) }}
                  </template>
                </el-table-column>
              </el-table>
              <span slot="reference">
                <el-tooltip class="item" effect="dark" content="点击查看经停站信息" placement="top-start">
                  <el-button type="text" @click="handleParking(scope.row)">
                    {{ scope.row.train_number }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                </el-tooltip>
              </span>
            </el-popover>
            
          </template>
        </el-table-column>
  
        <el-table-column label="起始站"  align="center">
          <template slot-scope="scope">
            <span >{{ scope.row.start_station }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="终点站"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.end_station }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="发车时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.start_time }}</span>
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="created_at" label="到站时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.end_time }}</span>
          </template>
        </el-table-column>
  
        <el-table-column align="center" prop="created_at" label="发车日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.arrive_day }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="handleQuerySeat(row)" >
              余票查询
            </el-button>
            <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="purchase(row)">
              购买
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total"  :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getplist" />
  
        <el-dialog title="余票信息" :visible.sync="dialogFormVisible">
          <el-table
    :data="seatinfo"
    style="width: 100%"
    border
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="carriage_no"
      label="车厢号"
     >
    </el-table-column>
    <el-table-column
      prop="seat_type"
      label="类型"
      >
    </el-table-column>

    <el-table-column label="剩余数量" >
      <template slot-scope="scope">
            <el-popover
              placement="right"
              width="330"
              trigger="click"
              >
                <el-descriptions class="margin-top"  :column="3" border>
                <el-descriptions-item>
                  <template slot="label">
                    A座
                  </template>
               {{ seatData.seat_A }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    B座
                  </template>
                  {{ seatData.seat_B }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    C座
                  </template>
                  {{ seatData.seat_C }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    D座
                  </template>
                  {{ seatData.seat_D }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    E座
                  </template>
                  {{ seatData.seat_E }}
                </el-descriptions-item>
              </el-descriptions>
              <span slot="reference">
                <el-tooltip class="item" effect="dark" content="点击座位信息" placement="top-start">
                  <el-button type="text" @click="handleSeat(scope.row)">
                    {{ scope.row.seat_count }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                </el-tooltip>
              </span>
            </el-popover>
          </template>
    </el-table-column>

      <el-table-column
      prop="seat_cost"
      label="票价">
      <template slot-scope="{row,$index}">
      {{ seatCost(row,$index) }}
    </template>
    </el-table-column>
  </el-table>
        <!-- 页脚 -->
        <div slot="footer" class="dialog-footer">
          <!-- 取消 -->
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <!-- 确定 -->
        </div>
      </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import {amap} from '@/utils/gode'
  import {queryTrain,querySeat,queryParking } from '@/api/train'
  import { mapGetters } from 'vuex'
  import Pagination from '@/components/Pagination'
  import moment from "moment"
  export default {
    name:'Menu3',
    components: { Pagination },
    data() {
      return {
        autoLoading:false,
        autoLoading2:false,
        activeName:'tab1',
        popoverVisible:false,
        popoverVisible2:false,
        hotCity:['北京','上海','广州','深圳' ,'成都' ,'杭州', '武汉' ,'西安', '重庆' 
                ,'青岛','长沙','南京','厦门','昆明','大连','天津','郑州','三亚','济南','福州'],
        ABCDE:{
          A:['阿勒泰','阿克苏','鞍山','安庆','安顺','阿拉善左','澳门','阿里','阿拉善右','阿尔山'],
          B:['巴中','百色','包头','毕节','北海','北京','博乐','保山','白城','布尔津','白山','巴彦淖尔'],
          C:['昌都','承德','常德','长春','朝阳','赤峰','长治','重庆','长沙','成都','沧源','常州','池州'],
          D:['大同','达州','稻城','丹东','迪庆','大连','大理','敦煌','东营','大庆','德令哈'],
          E:['鄂尔多斯','额济纳旗','恩施','二连浩特'],
        },
        FGHJ:{
          G:['广州','果洛','格尔木','广元','固原','高雄','赣州','贵阳','桂林'],
          H:['红原','海口','河池','邯郸','黑河','呼和浩特','合肥','杭州','淮安','怀化','海拉尔','哈密','衡阳','哈尔滨','和田','花土沟','花莲','霍林郭勒','惠州','汉中','黄山','呼伦贝尔','菏泽'],
          J:['嘉义','景德镇','加格达奇','嘉峪关','井冈山','金昌','九江','荆门','佳木斯','济宁','锦州','建三江','鸡西','九寨沟','金门','揭阳','济南','荆州'],
          F:['福州','阜阳','抚远','富蕴','佛山']
        },
        KLMN:{
          K:['库车','康定','喀什','凯里','昆明','库尔勒','克拉玛依'],
          L:['黎平','澜沧','龙岩','临汾','兰州','丽江','荔波','吕梁','临沧','陇南','六盘水','拉萨','洛阳','连云港','临沂','柳州','泸州','林芝'],
          M:['芒市','牡丹江','马祖','绵阳','梅州','马公','满洲里','漠河'],
          N:['南昌','南竿','南充','宁波','南京','宁蒗','南宁','南阳','南通'],
        },
        PQRST:{    
          P:['攀枝花','普洱'],
          Q:['琼海','秦皇岛','祁连','且末','庆阳','黔江','泉州','衢州','齐齐哈尔','青岛'],
          R:['日照','日喀则','若羌'],
          S:['神农架','莎车','上海','沈阳','石河子','石家庄','上饶','三明','三亚','深圳','十堰','邵阳','松原'],
          T:['台州','台中','塔城','腾冲','铜仁','通辽','天水','吐鲁番','通化','台南','台北','天津','台东','唐山','太原'],
          
        },
        WXYZ:{
          W:['梧州','乌兰察布','潍坊','威海','文山','温州','五大连池','乌海','武汉','武夷山','无锡','乌兰浩特','乌鲁木齐','万州','乌拉特中','巫山','武隆','芜湖'],
          X:['兴义','夏河','香港','西双版纳','新源','西安','忻州','信阳','襄阳','西昌','锡林浩特','厦门','西宁','徐州'],
          Y:['延安','银川','伊春','永州','榆林','宜宾','运城','宜春','宜昌','伊宁','义乌','营口','延吉','烟台','盐城','扬州','玉树玉','林岳阳'],
          Z:['郑州','张家界','舟山','扎兰屯','张掖','昭通','湛江','中卫','张家口','珠海','遵义']
        },
        vic1:null,
        vic2:null,
        p1:0,
        p2:0,
        dialogFormVisible: false,//对话框是否可见，初始不可见
        temp: {
          train_no:'',
          train_number:'',
          train_carriage:0,
          arrive_day:'',
          start_station:'',
          start_time:'',
          end_station:'',
          end_station:''
        },
        list: null,
        list2:null,
        seatinfo:null,//座位的基本信息
        occupation:null,
        last:null,//历时
        baseCost:null,//基本车费
        listLoading: false,
        gridLoading: false,
        total:0,
        listQuery: {
          arrive_day:'',
          end_station:'',
          start_station:'',
          page: 1,
          limit: 5,
          train_number:undefined
        },
        gridData:null,
        seatData:{seat_A:10,seat_B:10,seat_C:10,seat_D:10,seat_E:10},
        seatLoading:false,
        //日期限制
        pickerOptions: {
            disabledDate(time) {
              return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }]
          },
          //
          autoLocation:null,
          citys:[],
      }
    
    },
    created(){
      //this.handleQueryTrain()
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    watch:{
      //监视输入框中内容，以便是建议还是选择//
      'listQuery.start_station': {
        handler(newVal, oldVal) {
            if(newVal!=null){
              this.popoverVisible=false
            }
            else{
              this.popoverVisible=true
            }
        },
        deep: true,
    },
    'listQuery.end_station': {
      handler(newVal, oldVal) {
            if(newVal!=null){
              this.popoverVisible2=false
            }
            else{
              this.popoverVisible2=true
            }
        },
        deep: true,
    }

    },
    mounted(){
      this.citys=this.loadAll()
    },
    methods: {
      querySearch(queryString, cb) {
        var citys = this.citys;
        var results = queryString ? citys.filter(this.createFilter(queryString)) : citys;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (city) => {
          return city.value.toLowerCase().match(queryString.toLowerCase());
        };
      },
      loadAll() {
        var citySet=[
        '阿勒泰','阿克苏','鞍山','安庆','安顺','阿拉善左','澳门','阿里','阿拉善右','阿尔山',
        '巴中','百色','包头','毕节','北海','北京','博乐','保山','白城','布尔津','白山','巴彦淖尔',
        '昌都','承德','常德','长春','朝阳','赤峰','长治','重庆','长沙','成都','沧源','常州','池州',
        '大同','达州','稻城','丹东','迪庆','大连','大理','敦煌','东营','大庆','德令哈',
        '鄂尔多斯','额济纳旗','恩施','二连浩特',
        '广州','果洛','格尔木','广元','固原','高雄','赣州','贵阳','桂林',
        '红原','海口','河池','邯郸','黑河','呼和浩特','合肥','杭州','淮安','怀化','海拉尔','哈密','衡阳','哈尔滨','和田','花土沟','花莲','霍林郭勒','惠州','汉中','黄山','呼伦贝尔','菏泽',
        '嘉义','景德镇','加格达奇','嘉峪关','井冈山','金昌','九江','荆门','佳木斯','济宁','锦州','建三江','鸡西','九寨沟','金门','揭阳','济南','荆州',
        '福州','阜阳','抚远','富蕴','佛山','库车','康定','喀什','凯里','昆明','库尔勒','克拉玛依',
        '黎平','澜沧','龙岩','临汾','兰州','丽江','荔波','吕梁','临沧','陇南','六盘水','拉萨','洛阳','连云港','临沂','柳州','泸州','林芝',
        '芒市','牡丹江','马祖','绵阳','梅州','马公','满洲里','漠河',
        '南昌','南竿','南充','宁波','南京','宁蒗','南宁','南阳','南通',
        '攀枝花','普洱',
        '琼海','秦皇岛','祁连','且末','庆阳','黔江','泉州','衢州','齐齐哈尔','青岛',
        '日照','日喀则','若羌',
        '神农架','莎车','上海','沈阳','石河子','石家庄','上饶','三明','三亚','深圳','十堰','邵阳','松原',
        '台州','台中','塔城','腾冲','铜仁','通辽','天水','吐鲁番','通化','台南','台北','天津','台东','唐山','太原',
        '梧州','乌兰察布','潍坊','威海','文山','温州','五大连池','乌海','武汉','武夷山','无锡','乌兰浩特','乌鲁木齐','万州','乌拉特中','巫山','武隆','芜湖',
        '兴义','夏河','香港','西双版纳','新源','西安','忻州','信阳','襄阳','西昌','锡林浩特','厦门','西宁','徐州',
        '延安','银川','伊春','永州','榆林','宜宾','运城','宜春','宜昌','伊宁','义乌','营口','延吉','烟台','盐城','扬州','玉树玉','林岳阳',
        '郑州','张家界','舟山','扎兰屯','张掖','昭通','湛江','中卫','张家口','珠海','遵义']
        var temp=[]
        citySet.forEach((item,index) =>{
          var obj={
            id:(index+1),
            value:item
          }
          temp.push(obj)
        })
        return temp;
      },
      handleSelect(item) {
        console.log(item);
      },
  selectStartCity(city){
    this.listQuery.start_station=city
    this.popoverVisible=false
  },
  selectEndCity(city){
    this.listQuery.end_station=city
    this.popoverVisible2=false
  },
  getCityLoaction(MAP){
  var citysearch=new MAP.CitySearch();
  citysearch.getLocalCity((status,result) => {
  if(status==="complete"&&result.info ==="OK") {
  this.listQuery.start_station=result.city.substring(0,result.city.length-1)
  this.autoLocation=result.city
  }
  });
  },
  getCityLoaction2(MAP){
  var citysearch=new MAP.CitySearch();
  citysearch.getLocalCity((status,result) => {
  if(status==="complete"&&result.info ==="OK") {
  this.listQuery.end_station=result.city.substring(0,result.city.length-1)
  this.autoLocation=result.city
  }
  });
  },
  getLocation(){
    this.autoLoading=true
    setTimeout(() => {
        amap("b3f8bb47b6e5b66c76214320c75e2d12").then((amap) => {
        this.getCityLoaction(amap); //这个amap就是高德的地图对象Map
  });
      }, 100);
      setTimeout(() =>{
        this.autoLoading=false
      },1000)
  },
  getLocation2(){
    this.autoLoading2=true
    setTimeout(() => {
        amap("b3f8bb47b6e5b66c76214320c75e2d12").then((amap) => {
        this.getCityLoaction2(amap); //这个amap就是高德的地图对象Map
  });
      }, 100);
      setTimeout(() =>{
        this.autoLoading2=false
      },1000)
  },
  //控制表格颜色
  tableRowClassName({row, rowIndex}) {
    if (rowIndex === 0 ||rowIndex === 1) {
      return 'warning-row';
    } else if (rowIndex === 2||rowIndex === 3) {
      return '';
    }
    else{
      return 'success-row'
    }
  },
  //控制经停站表格颜色
  gridDataClassName({row, rowIndex}) {
    if(rowIndex>=this.p1&&rowIndex<=this.p2 ){
      return 'success-row'
    }
  },
  //分页相关
  getplist(){
    this.listLoading=true; 
    this.list2=this.list.slice((this.listQuery.page-1)*this.listQuery.limit,(this.listQuery.page)*this.listQuery.limit)
    this.listLoading=false;
  },
  //查询
  handleQueryTrain(){
    if(this.listQuery.start_station==''){
      this.$notify({
        title: '警告',
        message: '起始站不能为空！',
        type: 'warning'
      });
    }
    else if(this.listQuery.end_station==''){
      this.$notify({
        title: '警告',
        message: '目的地不能为空！',
        type: 'warning'
      });
    }
    else{
      this.listLoading=true
      queryTrain({arrive_day:this.listQuery.arrive_day,start_station:this.listQuery.start_station,end_station:this.listQuery.end_station})
      .then(response =>{
        this.list=response.data.data
        this.total = this.list.length
        this.list2=this.list.slice(0,this.listQuery.limit);
        this.listLoading = false
        this.$notify({
          title: '成功',
          message: '查找成功',
          type: 'success',
          duration: 2000
        })
      })
    }
    
  },
  //余票查询
  handleQuerySeat(row){
    this.listLoading=true
      querySeat({train_no:row.train_no,arrive_day:row.arrive_day,start_station_no:row.start_station_no,end_station_no:row.end_station_no})
      .then(response =>{
      this.seatinfo=response.data.data
      this.occupation=response.data.cook
      this.occupation.forEach((item) =>{
        this.seatinfo.forEach((ite)=>{
          if(ite.carriage_no === item.carriage_no){
            ite.seat_count--
          }
        })
      })
      if(moment('2018-10-20 '+row.start_time).isBefore('2018-10-20 '+row.end_time)){
       this.last = moment('2021-08-17 '+row.end_time).diff(moment('2021-08-17 '+row.start_time),'minutes')
    }
    else{
       this.last = moment('2021-08-18 '+row.end_time).diff(moment('2021-08-17 '+row.start_time),'minutes')
    }
      this.baseCost = this.last*0.833
      this.listLoading=false
      this.dialogFormVisible=true
      })
  },
  seatCost(row,rowIndex){
    if(rowIndex == 0||rowIndex ==1){
      return "￥"+parseFloat(this.baseCost*3).toFixed(0)+".00"
    }
    else if (rowIndex == 2||rowIndex ==3){
      return "￥"+parseFloat(this.baseCost*1.5).toFixed(0)+".00"
    }
    else{
      return "￥"+parseFloat(this.baseCost).toFixed(0)+".00"
    }
  },
  //经停站信息查询
  handleParking(row){
    this.gridLoading=true
    queryParking({train_no:row.train_no,arrive_day:row.arrive_day}).then(response =>{
      this.gridData=response.data.data
      this.vic1=row.start_station
      this.vic2=row.end_station
      this.gridLoading=false
      this.gridData.forEach((item,index) => {
      if(item.station_name==this.vic1){
        this.p1=index
      }
      if(item.station_name==this.vic2){
        this.p2=index
      }
    });
    })
    
  },
  handleResidence(row){
    if(row.arrive_time==='----'){
      return '----'
    }
    if(moment('2018-10-20 '+row.arrive_time).isSame('2018-10-20 '+row.start_time)){
      return '----'
    }
    if(moment('2018-10-20 '+row.arrive_time).isBefore('2018-10-20 '+row.start_time)){
      return moment('2021-08-17 '+row.start_time).diff(moment('2021-08-17 '+row.arrive_time),'minutes')+"分"
    }
    else{
      return moment('2021-08-18 '+row.start_time).diff(moment('2021-08-17 '+row.arrive_time),'minutes')+"分"
    }
  },
  //座位类型剩余
  handleSeat(row){
    this.seatData={seat_A:10,seat_B:10,seat_C:10,seat_D:10,seat_E:10}
    //处理商务座
    if(row.seat_type === '商务座')
    {
      this.seatData.seat_C="----"
      this.seatData.seat_D="----"
      this.seatData.seat_E="----"
      this.occupation.forEach((item) =>{
        if(item.carriage_no === row.carriage_no){
          if(item.seat_no%2===0){this.seatData.seat_B--}
          else{
            this.seatData.seat_A--
          }
        }
      })
    }
    if(row.seat_type === '一等座')
    {
      this.seatData.seat_D="----"
      this.seatData.seat_E="----"
      this.occupation.forEach((item) =>{
        if(item.carriage_no === row.carriage_no){
          if(item.seat_no%3===0){this.seatData.seat_C--}
          else if(item.seat_no%3===2){
            this.seatData.seat_B--
          }
          else{
            this.seatData.seat_A--
          }
        }
      })
    }
    if(row.seat_type === '二等座')
    {
      this.occupation.forEach((item) =>{
        if(item.carriage_no === row.carriage_no){
          if(item.seat_no%5===0){this.seatData.seat_E--}
          else if(item.seat_no%5===4){
            this.seatData.seat_D--
          }
          else if(item.seat_no%5===3){
            this.seatData.seat_C--
          }
          else if(item.seat_no%5===2){
            this.seatData.seat_B--
          }
          else{
            this.seatData.seat_A--
          }
        }
      })
    }
  },
  //购买车票
  purchase(row){
    this.$router.push({name:'Ticket',params:{train_info:row}})
  }
    }
  }
  </script>
  <style >
  .city_class:hover{
    color: #409eff;
  }
 .el-icon-map-location:hover{
  color:#409eff
 }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>